<script setup>
import {h, inject, ref} from 'vue'
import learnCommunal from "@/components/communal/learn-communal.vue";
import searchUtil from "@//components/utils/search-util.vue";
import {NIcon} from "naive-ui";
import {getAllClass, getClassByClassId, getClassByClassName, getClassByUserId} from '@/res/api/class_api'
const {toPage} = inject("toPage")
function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) });
}
// 得到所有课程数据
const classCardList = ref([])
getAllClass().then((res) => {
  // console.log(res.data)
  console.log(res.data.list)
  classCardList.value =  res.data.list
})

// 查询正在学习中的课程
const LearningClassList = ref([])
getClassByUserId().then((res) =>{
    // console.log(res)
  LearningClassList.value = res.data.list
})


</script>

<template>
  <learn-communal action-key="communal">
    <n-flex justify="space-between" :style="{marginTop:'1rem'}">
      <n-space vertical justify="space-around">
        <div>
          <h1>课程 course</h1>
          <p>获得开展独立数据科学项目所需的技能</p>
        </div>
        <!-- 搜索调用 -->
        <search-util search-type="课程搜索"/>
      </n-space>
      <n-image
          preview-disabled
          :width="300"
          src="/src/assets/picture/TheLittleThingsWorking.png"
          class="show-img"
      />
    </n-flex>
    <n-flex vertical class="curriculum-ing">
      <n-space>
        <n-image
            preview-disabled
            :width="54"
            src="/src/assets/picture/curriculuming.png"
        />
        <n-space vertical>
          <h2>进行中的课程</h2>
          <n-ellipsis expand-trigger="click" :line-clamp="2" :tooltip="false">
            掌握逻辑思维，学习代码语言，构建软件基础，解锁技术创造大门。
          </n-ellipsis>
        </n-space>
      </n-space>
      <!--      加载课程项-->
      <n-flex v-if="LearningClassList.length>0"
              v-for="(item, index) in LearningClassList" :key="index"
              justify="space-between"
              class="curriculums">
        <n-space>
          <n-space align="center">
            <n-image
                preview-disabled
                :width="72"
                :src="item.classImage"
            />
          </n-space>
          <n-space vertical >
            <h3>  {{ item.classTitle }}</h3>
            <n-tag :bordered="false" type="info" size="small">
              类型：{{ item.classType }}
            </n-tag>
            <n-tag :bordered="false" type="info" size="small">
              节点：{{ item.classNode }}
            </n-tag>
          </n-space>
        </n-space>
        <n-space align="center">
          <n-button type="info" @click="toPage('std/curriculum/show', {classId:item.id,node:item.classNode,type:'class'},false)">继续学习</n-button>
        </n-space>
      </n-flex>

      <n-flex v-else justify="space-between" class="curriculums">
        <n-space>
          <n-space align="center">
            <n-skeleton height="40px" circle />
          </n-space>
          <n-space vertical>
            <n-skeleton width="20rem" />
            <n-skeleton width="20rem" :repeat="2"/>
          </n-space>

        </n-space>
      </n-flex>

    </n-flex>
    <n-flex vertical class="curriculum-ing">
      <n-space>
        <n-image
            preview-disabled
            :width="56"
            src="/src/assets/picture/knowledgeBase.png"
        />
        <n-space vertical>
          <h2>知识库</h2>
          <n-ellipsis expand-trigger="click" :line-clamp="2" :tooltip="false">
            集中存储各类信息、专业知识与解答的数字化资源中心，助力快速学习与问题解决。
          </n-ellipsis>
        </n-space>
      </n-space>
      <n-grid cols="4" x-gap="12"  y-gap="18" justify="space-between">
        <n-gi v-if="classCardList.length>0"
                 v-for="(item, index) in classCardList" :key="index"
              vertical justify="space-between" class="cs-cart"
              @click="toPage('std/curriculum/library',{classType:item.classType})">
          <n-space justify="space-around" >
            <n-image :width="100" :src="item.classImage" preview-disabled/>
          </n-space>
          <div>
            <n-h5> 课程标题： {{ item.classTitle }}</n-h5>
            <n-ellipsis :line-clamp="3" expand-trigger="click">
              课程类型： {{  item.classType }}
            </n-ellipsis>
          </div>
          <p class="top-line">无先决条件</p>
        </n-gi>
        <n-gi v-else vertical justify="space-between" class="cs-cart">
          <n-space justify="space-around">
          </n-space>
          <div>
            <n-skeleton text :repeat="2" />
            <n-skeleton text :repeat="5" />
          </div>
          <n-skeleton height="40px" width="33%" />
        </n-gi>
      </n-grid>
    </n-flex>
  </learn-communal>
</template>

<style lang="scss" scoped>
.curriculum-ing{
  border: 0.5px solid #aaa;
  border-radius: 15px;
  margin-top: 1.5rem;
  padding: .72rem 1.8rem;
  &:last-child{
    margin-bottom: 2rem;
  }
}

.curriculums{
  border-radius: 15px;
  border: 0.5px solid #aaa;
  margin-top: .5rem;
  padding: .72rem 1.2rem;
  transition: 0.18s 0s ease all;
  transform: scaleY(1);
  &:hover{
    border: 1px solid #1296db;
    transition: 0.18s 0s ease all;
    box-shadow: 2px 2px 2px #f2f2f2;
  }
}
//对课程卡片设置
.cs-cart{
  border: 0.5px solid #aaa;
  border-radius: .72rem;
  box-sizing: border-box;
  width: 17rem;
  height: 15rem;
  padding: 1rem;
  transition: 0.18s 0s ease all;
  &:hover{
    border: 1px solid #1296db;
    transition: 0.18s 0s ease all;
    box-shadow: 2px 2px 2px #f2f2f2;
  }
}
</style>
